<template>
  <div class="container mx-auto px-4 py-8">
    <!-- 顶部标题和筛选选项 -->
    <div class="flex items-center justify-between mb-8">
      <div class="flex items-center space-x-1">
        <h1 class="text-2xl font-bold text-blue-600">SIM</h1>
        <span class="ml-2 text-gray-500">智能研究院</span>
      </div>
      
      <div class="flex items-center space-x-4">
        <span class="text-blue-600 font-medium text-lg cursor-pointer border-b-2 border-blue-600 pb-1">正在开课</span>
      </div>
    </div>
    
    <!-- 课程卡片区域 - 特色课程 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
      <div 
        v-for="course in featuredCourses" 
        :key="course.id"
        class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer transform hover:-translate-y-1"
        @click="$router.push(`/courses/${course.id}`)"
      >
        <!-- 课程图片区域 -->
        <div class="h-40 bg-blue-100 relative overflow-hidden">
          <div class="w-full h-full flex items-center justify-center">
            <div v-if="course.categoryId === 1" class="text-blue-600 text-6xl">
              <Document /> 
            </div>
            <div v-else-if="course.categoryId === 2" class="text-blue-600 text-6xl">
              <Cpu /> 
            </div>
            <div v-else-if="course.categoryId === 3" class="text-blue-600 text-6xl">
              <Message /> 
            </div>
            <div v-else class="text-blue-600 text-6xl">
              <Brush /> 
            </div>
          </div>
        </div>
        
        <!-- 课程信息 -->
        <div class="p-4">
          <h3 class="font-medium text-gray-800 mb-2 line-clamp-2 h-12">
            {{ course.title }}
          </h3>
          <div class="text-sm text-gray-500">
            开始时间: {{ formatDate(course.startTime) }}
          </div>
        </div>
      </div>
    </div>
    
    <!-- 课程分类选择区域 -->
    <div class="mb-8">
      <h2 class="text-2xl font-bold text-gray-800 mb-4">课程分类</h2>
      <div class="flex flex-wrap gap-3">
        <button
          :class="['px-6 py-3 rounded-full text-white font-medium transition-all duration-300 shadow-md', { 'bg-blue-600': currentTab === 'all', 'bg-gray-500 hover:bg-gray-600': currentTab !== 'all' }]"
          @click="changeTab('all')"
        >
          全部课程
        </button>
        <button
          :class="['px-6 py-3 rounded-full text-white font-medium transition-all duration-300 shadow-md', { 'bg-blue-600': currentTab === 'my', 'bg-gray-500 hover:bg-gray-600': currentTab !== 'my' }]"
          @click="changeTab('my')"
        >
          我发布的课程
        </button>
      </div>
    </div>
    
    <!-- 分类课程列表区域 -->
    <div class="bg-white rounded-xl shadow-md p-6">
      <h3 class="text-xl font-bold text-gray-800 mb-4">{{ currentTab === 'all' ? '全部课程' : '我发布的课程' }}</h3>
      
      <!-- 未登录状态只显示登录提示 -->
      <div v-if="!auth.isLoggedIn" class="text-center py-12 text-gray-500">
        <span>查看全部课程，</span>
        <span class="cursor-pointer text-blue-600 hover:underline" @click="$router.push('/login')">去登录</span>
      </div>
      
      <!-- 登录状态下根据课程数量显示列表或提示 -->
      <div v-else-if="displayCourses.length === 0" class="text-center py-12 text-gray-500">
        暂无课程
      </div>
      
      <div v-else class="space-y-4">
        <router-link 
          v-for="course in displayCourses"
          :key="course.id"
          :to="`/courses/${course.id}`"
          class="block p-4 rounded-lg hover:bg-gray-50 transition-colors flex justify-between items-center border border-gray-100"
        >
          <div class="flex items-center space-x-4">
            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
              <Document v-if="course.categoryId === 1" /> 
              <Cpu v-else-if="course.categoryId === 2" /> 
              <Message v-else-if="course.categoryId === 3" /> 
              <Brush v-else /> 
            </div>
            <div>
              <h4 class="font-medium text-gray-800">{{ course.title }}</h4>
              <p class="text-sm text-gray-500 mt-1">{{ course.body }}</p>
            </div>
          </div>
          <div class="text-right">
            <div class="text-sm text-gray-500">
              上课老师: {{ course.teachername || '未知' }}
            </div>
            <div class="text-sm text-gray-500 mt-1">
              {{ formatDate(course.startTime) }}
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '../store/auth'
import api from '../services/api'
import { Document, ArrowRight, User, ArrowLeft, Cpu, Message, Brush } from '@element-plus/icons-vue'

const route = useRoute();
const auth = useAuthStore();

const categories = ref([])
const allCourses = ref([]) // 存储所有课程
const displayCourses = ref([]) // 当前显示的课程
const tasks = ref([])
const currentTab = ref('all') // 'all' 或 'my'

// 获取特色课程（显示在顶部的课程）
const featuredCourses = computed(() => {
  // 返回当前登录用户发布的课程，最多显示前4个课程在特色区域
  const myCourses = allCourses.value.filter(course => course.userid === auth.userId);
  const displayCourses = myCourses.slice(0, 4);
  return displayCourses.map(course => ({
    ...course,
    // 为每个课程添加一些模拟的图片数据
    imageUrl: ''
  }))
})

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 加载数据
const loadData = async () => {
  try {
    // 只加载课程数据，不再加载分类数据
    // 清除本地存储的缓存，确保每次都从API获取最新数据
    localStorage.removeItem("localCourses");

    try {
      // 直接调用API获取课程数据，接口会自动传入typeIndex和userid
      const coursesRes = await api.getCourses();
      console.log(coursesRes.data);
      
      if (coursesRes.data.length > 0) {
        // 存储所有课程数据
        allCourses.value = coursesRes.data;
        // 根据当前选中的标签显示相应的课程
        updateDisplayCourses();
        console.log('成功获取课程数据:', allCourses.value);
      } else {
        console.log('API返回非成功状态或空数据，使用模拟课程数据');
        // 获取登录用户ID
        const userId = auth.userId;
        // 使用模拟课程数据并添加userid字段，包含一些不同用户发布的课程
        const mockCourses = [
          { id: 1, title: 'JavaScript 高级编程', categoryId: 1, body: '深入学习JavaScript的高级特性和最佳实践', teachername: '张教授', description: '深入学习JavaScript的高级特性和最佳实践', teacher: '张教授', startTime: '2023-09-01', userid: userId },
          { id: 2, title: '数据结构与算法', categoryId: 1, body: '掌握计算机科学的核心数据结构和算法', teachername: '李讲师', description: '掌握计算机科学的核心数据结构和算法', teacher: '李讲师', startTime: '2023-09-05', userid: userId },
          { id: 3, title: '概率论与数理统计', categoryId: 2, body: '学习概率论的基本原理和统计分析方法', teachername: '王教授', description: '学习概率论的基本原理和统计分析方法', teacher: '王教授', startTime: '2023-09-10', userid: 9999 }, // 其他用户的课程
          { id: 4, title: '英语口语进阶', categoryId: 3, body: '提高英语口语表达能力和听力理解', teachername: 'Smith老师', description: '提高英语口语表达能力和听力理解', teacher: 'Smith老师', startTime: '2023-09-15', userid: 8888 }, // 其他用户的课程
          { id: 5, title: 'UI设计基础', categoryId: 4, body: '学习用户界面设计的基本原则和技巧', teachername: '陈设计师', description: '学习用户界面设计的基本原则和技巧', teacher: '陈设计师', startTime: '2023-09-20', userid: userId },
          { id: 6, title: 'Python数据分析', categoryId: 1, body: '使用Python进行数据处理和可视化', teachername: '赵工程师', description: '使用Python进行数据处理和可视化', teacher: '赵工程师', startTime: '2023-09-25', userid: userId },
          { id: 7, title: 'Java核心技术', categoryId: 1, body: '学习Java语言的核心概念和技术', teachername: '刘教授', description: '学习Java语言的核心概念和技术', teacher: '刘教授', startTime: '2023-10-01', userid: 7777 } // 其他用户的课程
        ];
        // 存储所有课程数据
        allCourses.value = mockCourses;
        // 根据当前选中的标签显示相应的课程
        updateDisplayCourses();
      }
    } catch (error) {
      console.log('API请求失败，使用模拟课程数据:', error.message);
      // 获取登录用户ID
      const userId = auth.userId;
      // 使用模拟课程数据并添加userid字段，包含一些不同用户发布的课程
      const mockCourses = [
        { id: 1, title: 'JavaScript 高级编程', categoryId: 1, body: '深入学习JavaScript的高级特性和最佳实践', teachername: '张教授', description: '深入学习JavaScript的高级特性和最佳实践', teacher: '张教授', startTime: '2023-09-01', userid: userId },
        { id: 2, title: '数据结构与算法', categoryId: 1, body: '掌握计算机科学的核心数据结构和算法', teachername: '李讲师', description: '掌握计算机科学的核心数据结构和算法', teacher: '李讲师', startTime: '2023-09-05', userid: userId },
        { id: 3, title: '概率论与数理统计', categoryId: 2, body: '学习概率论的基本原理和统计分析方法', teachername: '王教授', description: '学习概率论的基本原理和统计分析方法', teacher: '王教授', startTime: '2023-09-10', userid: 9999 }, // 其他用户的课程
        { id: 4, title: '英语口语进阶', categoryId: 3, body: '提高英语口语表达能力和听力理解', teachername: 'Smith老师', description: '提高英语口语表达能力和听力理解', teacher: 'Smith老师', startTime: '2023-09-15', userid: 8888 }, // 其他用户的课程
        { id: 5, title: 'UI设计基础', categoryId: 4, body: '学习用户界面设计的基本原则和技巧', teachername: '陈设计师', description: '学习用户界面设计的基本原则和技巧', teacher: '陈设计师', startTime: '2023-09-20', userid: userId },
        { id: 6, title: 'Python数据分析', categoryId: 1, body: '使用Python进行数据处理和可视化', teachername: '赵工程师', description: '使用Python进行数据处理和可视化', teacher: '赵工程师', startTime: '2023-09-25', userid: userId },
        { id: 7, title: 'Java核心技术', categoryId: 1, body: '学习Java语言的核心概念和技术', teachername: '刘教授', description: '学习Java语言的核心概念和技术', teacher: '刘教授', startTime: '2023-10-01', userid: 7777 } // 其他用户的课程
      ];
      // 存储所有课程数据
      allCourses.value = mockCourses;
      // 根据当前选中的标签显示相应的课程
      updateDisplayCourses();
    }
  } catch (error) {
    console.error('加载数据过程中出现异常:', error);
    // 获取登录用户ID
    const userId = auth.userId;
    // 兜底的模拟数据并添加userid字段，包含一些不同用户发布的课程
    const mockCourses = [
      { id: 1, title: 'JavaScript 高级编程', categoryId: 1, body: '深入学习JavaScript的高级特性和最佳实践', teachername: '张教授', description: '深入学习JavaScript的高级特性和最佳实践', teacher: '张教授', startTime: '2023-09-01', userid: userId },
      { id: 2, title: '数据结构与算法', categoryId: 1, body: '掌握计算机科学的核心数据结构和算法', teachername: '李讲师', description: '掌握计算机科学的核心数据结构和算法', teacher: '李讲师', startTime: '2023-09-05', userid: userId },
      { id: 3, title: '概率论与数理统计', categoryId: 2, body: '学习概率论的基本原理和统计分析方法', teachername: '王教授', description: '学习概率论的基本原理和统计分析方法', teacher: '王教授', startTime: '2023-09-10', userid: 9999 }, // 其他用户的课程
      { id: 4, title: '英语口语进阶', categoryId: 3, body: '提高英语口语表达能力和听力理解', teachername: 'Smith老师', description: '提高英语口语表达能力和听力理解', teacher: 'Smith老师', startTime: '2023-09-15', userid: 8888 }, // 其他用户的课程
      { id: 5, title: 'UI设计基础', categoryId: 4, body: '学习用户界面设计的基本原则和技巧', teachername: '陈设计师', description: '学习用户界面设计的基本原则和技巧', teacher: '陈设计师', startTime: '2023-09-20', userid: userId },
      { id: 6, title: 'Python数据分析', categoryId: 1, body: '使用Python进行数据处理和可视化', teachername: '赵工程师', description: '使用Python进行数据处理和可视化', teacher: '赵工程师', startTime: '2023-09-25', userid: userId },
      { id: 7, title: 'Java核心技术', categoryId: 1, body: '学习Java语言的核心概念和技术', teachername: '刘教授', description: '学习Java语言的核心概念和技术', teacher: '刘教授', startTime: '2023-10-01', userid: 7777 } // 其他用户的课程
    ];
    // 存储所有课程数据
    allCourses.value = mockCourses;
    // 根据当前选中的标签显示相应的课程
    updateDisplayCourses();
  }
}

// 更新当前显示的课程
const updateDisplayCourses = () => {
  if (currentTab.value === 'all') {
    // 显示所有课程，以倒序方式排列
    displayCourses.value = [...allCourses.value].reverse();
  } else if (currentTab.value === 'my') {
    // 显示当前登录用户发布的课程，以倒序方式排列
    displayCourses.value = allCourses.value.filter(course => course.userid === auth.userId).reverse();
  }
}

// 切换课程标签
const changeTab = (tab) => {
  currentTab.value = tab;
  updateDisplayCourses();
}

// 页面加载时获取数据
onMounted(() => {
  loadData()
})

// 监听路由变化，当从添加页面跳转回来时刷新数据
watch(() => route.fullPath, () => {
  loadData()
})
</script>